<template>
  <div class="bg">
    <Top></Top>

    <div>
      <el-input v-model="essayData.title" placeholder="请输入问题的标题" size="large" disabled="false" />
    </div>

    <div>
      <TEditor v-model="essayData.content" ref="editorRef" @change="editorChanged"/>
    </div>

<!--    <btn @click="showTextValue">xx</btn>-->
    <div class="buttonItem">
      <el-button type="primary" size="large" @click="updateEssay">
        确认
      </el-button>
    </div>
  </div>

</template>

<script >
import TEditor from "@/components/TEditor"
import utils from "@/js/util/utils"
import Top from "@/components/Top";
import {ElMessage} from "element-plus";
import axios from "@/settings/axios";
import {successedOutVOHandle} from "@/utils/CommonUtils";
import router from "@/router";
import {useRoute} from "vue-router";
// import tinymce from "tinymce";

export default {
  data(){
    return{
      content: '',
      editorData: null,
      essayTitle: "",
      essayId: "",
      essayData: {},
    }
  },
  components: {
    TEditor,
    Top
  },
  async mounted() {
    this.$store.commit('updateQueryType', "essay");
    this.essayId = useRoute().query.essayId;
    let params = {
      "essayId": this.essayId,
    };
    let essayData = await axios.get("/shane_essay/get_one_origin", params);
    this.essayData = essayData;
    console.log(this.essayData);

  },
  methods:{

    editorChanged(editorData){
      this.editorData = editorData;
    },
    async updateEssay() {
      let plainText = utils.stripHtmlTags(this.essayData.content);
      this.essayData.plainText = plainText;

      if (utils.isEmptyStr(this.essayData.title)) {
        ElMessage({
          showClose: true,
          message: "标题不能为空",
          type: 'error',
          center: true,
        });
        return false;
      }

      if (utils.isEmptyStr(this.essayData.content)) {
        ElMessage({
          showClose: true,
          message: "文本内容不能为空",
          type: 'error',
          center: true,
        });
        return false;
      }

      let successOutVO = await axios.post("/shane_essay/update_one_by_id", this.essayData);
      successedOutVOHandle(successOutVO);
      router.push("/shane/home");
      let params = {
        "essayId": this.essayId
      };
      router.push({
        path: "/essay/info",
        query: params
      });
    },

  }
}
</script>

<style scoped>
.bg{
  background-color: rgba(243,243,243);
}
.buttonItem {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 5px;
}
</style>

<!--11111-->

<!--<template>-->
<!--  <router-view></router-view>-->
<!--  // 引入-->
<!--  import TEditor from '@/components/TEditor.vue';-->
<!--  // 注册-->
<!--  components: {-->
<!--  TEditor,-->
<!--  },-->
<!--  // 使用-->
<!--  <TEditor ref="editor" v-model="leafDetail.content" />-->

<!--</template>-->

<!--<script>-->
<!--// 引入-->
<!--import TEditor from '@jsdawn/vue3-tinymce';-->
<!--export default {-->
<!--  name: "Add",-->
<!--  data() {-->
<!--    return {-->
<!--      username: '',-->
<!--      password: ''-->
<!--    }-->
<!--  },-->
<!--  components: {-->
<!--    TEditor,-->
<!--  },-->
<!--}-->
<!--</script>-->
